<template>
   <div class="home">
        <h4>系统首页</h4>
        <div class="container">
            <div class="count">
                <ul>
                    <li>
                        <div>今日新增商家</div>
                        <div>{{HomeInfo.MerchantTodayNum}}家</div>
                    </li>
                    <li>
                        <div>今日新增供应商</div>
                        <div>{{HomeInfo.farmerTodayNum}}家</div>
                    </li>
                    <li>
                        <div>今日订单总数</div>
                        <div>{{HomeInfo.orderTodayNum}} 单 </div>
                    </li>
                    <li>
                        <div>今日成交总额</div>
                        <div>￥{{HomeInfo.orderMoneyToday}}</div>
                    </li>
                    <li>
                        <div>今日服务费收入</div>
                        <div>￥{{HomeInfo.serviceFeeTodayNum}}</div>
                    </li>
                    <li>
                        <div>今日物流费收入</div>
                        <div>￥{{HomeInfo.transFeeTodayNum}}</div>
                    </li>
                </ul>
            </div>
            <!-- 历史统计 -->
            <div class="historical">
                <h4>历史统计</h4>
                <ul>
                    <li>
                        <div class="left"> <div>供应商总数</div> <span>{{HomeInfo.farmerAllNum}}家</span></div>
                        <div class="right"><div>商家总数</div><span>{{HomeInfo.merchantAllNum}}家</span></div>
                    </li>
                    <li>
                        <div class="left"> <div>成交订单总数</div> <span>{{HomeInfo.orderAllNum}}单</span></div>
                        <div class="right"><div>成交额总数</div><span>{{HomeInfo.orderMoneyAll}}</span></div>
                    </li>
                    <li>
                        <div class="left"> <div>服务费收入总数</div> <span>{{HomeInfo.serviceFeeAllNum}}</span></div>
                        <div class="right"><div>物流费收入总数</div><span>{{HomeInfo.transFeeAllNum}}</span></div>
                    </li>
                    <li>
                        <div class="left"><div>商家退款总额</div><span>{{HomeInfo.refundMoneyAll}}</span></div>
                        <div class="right"></div>
                    </li>
                </ul>
            </div>
            <!-- 订单统计 -->
            <div class="order_count">
                <div class="order_content">
                    <h4>订单统计</h4>
                    <div class="order_info">
                        <div class="order_left">
                             <div class="top">
                                 <div style="color:#666;">本月订单总数</div>
                                 <div style="font-size:20px;color:#666;">30000</div>
                                 <div style="color:#666;">
                                      <i class="el-icon-caret-top" v-if="20>0" style="color:#67C23A;"></i>
                                      <i class=" el-icon-caret-bottom" v-else style="color:#F56C6C;"></i>
                                      <span v-if="20>0" style="color:#67C23A;">10%</span>
                                      <span v-else style="color:#F56C6C;">10%</span>
                                      同比上周
                                 </div>
                             </div>
                             <div class="bottom">
                                  <div style="color:#666;">本周订单总数</div>
                                 <div style="font-size:20px;color:#666;">30000</div>
                                 <div style="color:#666;">
                                     <i class="el-icon-caret-top" v-if="-20>0" style="color:#67C23A;"></i>
                                     <i class=" el-icon-caret-bottom" v-else style="color:#F56C6C;"></i>
                                     <span v-if="-20>0" style="color:#67C23A;">10%</span>
                                      <span v-else style="color:#F56C6C;">10%</span>
                                     同比上周
                                 </div>
                             </div>
                        </div>
                        <div class="order_right">
                            <div class="canvas_box" style="height:100%;position:relative">
                                  <div id="myChart" :style="{width: '100%', height: '100%'}"></div>
                                  <div class="title" style="position:absolute;
                                                            top:0;left:0;height:50px;width:100%;">
                                      近一周订单统计
                                        <el-date-picker
                                                    v-model="value7"
                                                    type="daterange"
                                                    align="right"
                                                    unlink-panels
                                                    range-separator="至"
                                                    start-placeholder="开始日期"
                                                    end-placeholder="结束日期"
                                                    style="float:right;margin-top:10px;margin-right:20px;">
                                        </el-date-picker>
                                  </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 销售统计 -->
            <div class="order_count">
                    <div class="order_content">
                        <h4>销售统计</h4>
                        <div class="order_info">
                             <div class="order_left">
                                    <div class="top">
                                        <div style="color:#666;">本月订单总数</div>
                                        <div style="font-size:20px;color:#666;">30000</div>
                                        <div style="color:#666;">
                                            <i class="el-icon-caret-top" v-if="20>0" style="color:#67C23A;"></i>
                                            <i class=" el-icon-caret-bottom" v-else style="color:#F56C6C;"></i>
                                            <span v-if="20>0" style="color:#67C23A;">10%</span>
                                            <span v-else style="color:#F56C6C;">10%</span>
                                            同比上周
                                        </div>
                                    </div>
                                    <div class="bottom">
                                        <div style="color:#666;">本周订单总数</div>
                                        <div style="font-size:20px;color:#666;">30000</div>
                                        <div style="color:#666;">
                                            <i class="el-icon-caret-top" v-if="-20>0" style="color:#67C23A;"></i>
                                            <i class=" el-icon-caret-bottom" v-else style="color:#F56C6C;"></i>
                                            <span v-if="-20>0" style="color:#67C23A;">10%</span>
                                            <span v-else style="color:#F56C6C;">10%</span>
                                            同比上周
                                        </div>
                                    </div>
                             </div>
                             <div class="order_right">
                                    <div class="canvas_box" style="height:100%;position:relative">
                                        <div id="myChart2" :style="{width: '100%', height: '100%'}"></div>
                                        <div class="title" style="position:absolute;
                                                                    top:0;left:0;height:50px;width:100%;">
                                            近一周销售统计
                                                <el-date-picker
                                                            v-model="value8"
                                                            type="daterange"
                                                            align="right"
                                                            unlink-panels
                                                            range-separator="至"
                                                            start-placeholder="开始日期"
                                                            end-placeholder="结束日期"
                                                            style="float:right;margin-top:10px;margin-right:20px;">
                                                </el-date-picker>
                                        </div>
                                    </div>
                            </div>
                        </div>
                    </div>
            </div>
            <div class="sell_count"></div>
        </div>
   </div>
</template>

<script>
import { getOrderLine,homeStatics,getSellLine } from '@/request/api'
import { fmoney } from '@/assets/js/common'
export default {
    data(){
        return {
            width1:'',
            height2:'',
            value7:'',
            value8:'',
            options:{
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#666'
                        },
                        lineStyle: {
                            color: "red"
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#666'
                        },
                        lineStyle: {
                            color: "blue"
                        }
                    }
                },
                series: [{ 
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    areaStyle: {
                    
                    },
                    smooth: true,
                    itemStyle: {
                        normal: {
                            color: 'skyblue', //背景色 
                            label: { // 在柱形图上显示具体数据
                                show: true,
                                position: 'top', // 所在的位置
                                textStyle: { // 数据展示的样式
                                    fontSize: '10',
                                    fontWeight: 'bold',
                                    color: 'skyblue'
                                }
                            },
                        }
                 }
                }]
            },
            options2:{
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#666'
                        },
                        lineStyle: {
                            color: "red"
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#666'
                        },
                        lineStyle: {
                            color: "blue"
                        }
                    }
                },
                series: [{ 
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    areaStyle: {
                    
                    },
                    smooth: true,
                    itemStyle: {
                        normal: {
                            color: 'skyblue', //背景色 
                            label: { // 在柱形图上显示具体数据
                                show: true,
                                position: 'top', // 所在的位置
                                textStyle: { // 数据展示的样式
                                    fontSize: '10',
                                    fontWeight: 'bold',
                                    color: 'skyblue'
                                }
                            },
                        }
                 }
                }] 
            },
            HomeInfo:{
            }
        }

    },
    mounted(){
        this.drawLine();
        this.drawLine2();
        this.resizeCharts();
        window.onresize = myChart.resize;
    },
    created(){
         this.getOrder_line();
         this.get_HomeInfo();
         this.get_sellLine();
    },
    methods:{
      drawLine(){
           // 基于准备好的dom，初始化echarts实例
           let myChart = this.$echarts.init(document.getElementById('myChart'))
           // 绘制图表
            myChart.setOption(this.options);
            window.addEventListener("resize", myChart.resize);
      },
      drawLine2(){
            let myChart2 = this.$echarts.init(document.getElementById('myChart2'))
           // 绘制图表
            myChart2.setOption(this.options2);
            window.addEventListener("resize", myChart2.resize);
      },
      resizeCharts () {
            let chartBox = document.getElementsByClassName('canvas_box')[0];
            this.width1 = window.getComputedStyle(chartBox).width;
            this.height2 = window.getComputedStyle(chartBox).height;
      },
      getOrder_line(){
                getOrderLine({
                }).then(res => {
                    console.log(res);
                    this.options.xAxis.data  = res.date;
                    this.options.series[0].data  = res.data;
                    console.log(this.options);
                    this.drawLine();
                })
      },
      get_HomeInfo(){
          homeStatics({}).then(res => {
               console.log(res);
               if(res.code == 1) {
                   this.HomeInfo = res.data;
                   this.HomeInfo.orderMoneyToday = fmoney(this.HomeInfo.orderMoneyToday,2);
                   this.HomeInfo.serviceFeeTodayNum = fmoney(this.HomeInfo.serviceFeeTodayNum,2);
                   this.HomeInfo.transFeeTodayNum = fmoney(this.HomeInfo.transFeeTodayNum,2);
                   this.HomeInfo.orderMoneyAll = fmoney(this.HomeInfo.orderMoneyAll,2);
                   this.HomeInfo.serviceFeeAllNum = fmoney(this.HomeInfo.serviceFeeAllNum,2);
                   this.HomeInfo.transFeeAllNum = fmoney(this.HomeInfo.transFeeAllNum,2);
                   this.HomeInfo.refundMoneyAll = fmoney(this.HomeInfo.refundMoneyAll,2)
               }
          })
      },
      get_sellLine(){
          getSellLine().then(res => {
                console.log(res);
                this.options2.xAxis.data  = res.date;
                this.options2.series[0].data  = res.data;
                console.log(this.options2);
                this.drawLine2();
          })
      }
    }
 }
</script>
<style  scoped>
    .canvas_box .title {
        line-height: 50px;
        color: #666;
        font-size:14px;
        padding-left: 98px;
        
    }
     .home > h4 {
        line-height: 22px;
        border-left: 5px solid rgb(32, 160, 255);
        font-size:16px;
        color: #666;
        padding-left:  8px;
        margin-bottom:12px;
     }
      .home .container  {
          border:1px solid #e4e4e4;
          padding: 20px;
          margin-top:10px;
          width: 100%;
      }
      .home .container  .count ul  {
          overflow: hidden;
          width:100%;
      }
      .home .container  .count ul li {
          float: left;
          width: 15%;
          height: 140px;
          border: 1px solid #e4e4e4;
          margin-right:1.5%;
          padding: 24px  10px 0;
      }
      .home .container  .count ul li div {
          text-align: center;
      }
      .home .container  .count ul li div:nth-of-type(1) {
          color:#333;
          line-height: 18px;
          margin-bottom: 20px;
      }
      .home .container  .count ul li div:nth-of-type(2) {
          color:#ff6600;
          font-weight: 700;
          line-height: 24px;
      } 
      .home .container  .historical {
          margin-top: 30px;
          border: 1px solid #e4e4e4;
      }
      .home .container  .historical h4 {
          height: 50px;
          line-height: 50px;
          text-align: center;
          border-bottom:  1px solid #e4e4e4;

      }
      .home .container  .historical li {
          height: 50px;
          line-height: 50px;
          border-bottom:  1px solid #e4e4e4;
          display: flex;
      }
      .home .container  .historical li> div {
          flex:1;
          padding-left: 30px;
          line-height: 50px;
          display: flex;
        
      }
      .home .container  .historical li .left div{
         width: 40%;

      }
      .home .container  .historical li .left span {
           width: 60%;
      }
       .home .container  .historical li .right div{
         width: 40%;

      }
      .home .container  .historical li .right span {
           width: 60%;
      }
      .home .container  .historical li div span {
          color :#ff6600;
          font-weight: 700;
          margin-left: 200px;
      }
 
      .home .container  .historical li:nth-last-child(1) {
          border-bottom: 0;
      }
       .order_count  {
           /* #f9f9f9 */
           padding: 0 40px;
           margin-top: 50px;
   
       }
       .order_content {
          border: 1px solid #e4e4e4;
          box-shadow: #f9f9f9 0px 0px 7px 8px;
       }
       .order_content h4 {
           padding-left:24px;
           color:#666;
           height:46px;
           line-height: 46px;
           background-color: #f3f3f3;
       }
       .order_info { 
           height: 325px;    
       }
       .order_left {
          width: 168px;
          height: 100%;
          float:left;
          border-right: 1px solid #e4e4e4;
       }
       .order_right {
           width: 100%;
          height: 100%;
          padding-left: 168px;
       }
       .order_left  div {
           font-size:14px;
           text-align: center;
           line-height: 24px;
       }
       .order_left >div {
          padding: 20px  4px;
       }
      
</style>